<template>
  <div class="cascader">
    <el-cascader
      filterable
      clearable
      style="width: 100%"
      size="small"
      expand-trigger="hover"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange"
      class="one"
    >
    </el-cascader>


  </div>
</template>

<script>
import options from "../assets/js/country-level-data";

export default {
  name: "cascader",
  props:{
    ars : ""
  },
  data() {
    return {
      options: options,
      selectedOptions: "",
    }
  },
  watch:{
    ars:{
      deep: true,
      handler(newVal , oldVal){
        this.selectedOptions = newVal;
      }
    }
  },
  methods: {
    handleChange(value) {
      let str = "";
      value.forEach((data) => {
        str += data;
      })
      this.$emit('address', str)
    },
  }
}
</script>

<style scoped>
.cascader {
  width: 100%;
  height: 100%;
}

.one {
  width: 100%;
  margin-bottom: 5%;
}
</style>
<style>
.el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {
  color: #0BB278;
  font-weight: 700;
}
</style>
